<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>管理员添加</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="/static/css/font.css">
    <link rel="stylesheet" href="/static/css/xadmin.css">
    <script type="text/javascript" src="/static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/js/xadmin.js"></script>
    <script type="text/javascript" src="/static/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery.cookie.js"></script>
    <script src="/static/js/flow-meter.js" charset="utf-8"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
            <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
            <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form">
            {% csrf_token %}
            <div class="layui-form-item">
                <label for="L_username" class="layui-form-label">
                    <span class="x-red">*</span>用户名
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="name" name="name" required="" lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label for="L_email" class="layui-form-label">
                    <span class="x-red">*</span>邮箱</label>
                <div class="layui-input-inline">
                    <input type="text" id="L_email" name="email" required="" lay-verify="email" autocomplete="off"
                           class="layui-input"></div>
                <div class="layui-form-mid layui-word-aux">
                    <span style="color: red;display: none" id="unique_email_msg">该邮箱已存在！</span>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="L_username" class="layui-form-label">
                    <span class="x-red">*</span>联系电话</label>
                <div class="layui-input-inline">
                    <input type="text" id="L_phone" name="phone" required="" lay-verify="phone" autocomplete="off"
                           class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">
                    <span style="color: red;display: none" id="unique_phone_msg">该联系电话已存在！</span>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label for="desc" class="layui-form-label">
                    备注
                </label>
                <div class="layui-input-block">
                    <textarea placeholder="请输入内容" id="desc" name="remark" class="layui-textarea"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label for="L_repass" class="layui-form-label"></label>
                <button class="layui-btn" lay-filter="add" lay-submit="">添加</button>
            </div>
        </form>
    </div>
</div>
<script>
    layui.use(['form', 'layer', 'jquery'],
        function () {
            $ = layui.jquery;
            var form = layui.form,
                layer = layui.layer;

            //自定义验证规则
            form.verify({
                name: function (value) {
                    if (!checkName(value)) {
                        return "用户名字符长度只能为[1-32]个字符！"
                    }
                },
                phone: function (value) {
                    if (!checkPhone(value)) {
                        return "联系电话格式错误！"
                    }
                },
                email: function (value) {
                    if (!checkEmail(value)) {
                        return "邮箱格式错误！"
                    }
                },
                remark: function (value) {
                    if (!checkRemark(value)) {
                        return "备注字符长度只能为[0-128]个字符！"
                    }
                }
            });

            //监听提交
            form.on('submit(add)',
                function (data) {
                    post({
                        "param": JSON.stringify(data.field),
                        "action": "create_admin"
                    }, '/handler/admin/', function (data) {
                        if (data.success) {
                            layer.alert("添加成功", {
                                    icon: 6
                                },
                                function () {
                                    //关闭当前frame
                                    xadmin.close();
                                    // 可以对父窗口进行刷新
                                    xadmin.father_reload();
                                });
                        } else {
                            layer.msg(data.msg, {icon: 5, time: 3000});
                        }
                    });
                    return false;
                });

            $("#L_email").on("input", function (e) {
                //获取input输入的值
                let val = e.delegateTarget.value;
                get({'param': JSON.stringify({'email': val}), 'action': 'check_email_unique'},
                    '/handler/user/', function (data) {
                        if (data.data) {
                            $("#unique_email_msg").hide();
                        } else {
                            $("#unique_email_msg").show();
                        }
                    });
            });

            $("#L_phone").on("input", function (e) {
                //获取input输入的值
                let val = e.delegateTarget.value;
                get({'param': JSON.stringify({'phone': val}), 'action': 'check_phone_unique'},
                    '/handler/user/', function (data) {
                        if (data.data) {
                            $("#unique_phone_msg").hide();
                        } else {
                            $("#unique_phone_msg").show();
                        }
                    });
            });

        });
</script>
<script>var _hmt = _hmt || [];
(function () {
    var hm = document.createElement("script");
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
})();</script>
</body>

</html>